<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{{ STATIC_URL }}ckeditor/ckeditor.js"></script>
    <script src="{{ STATIC_URL }}ckeditor/samples1/js/sample.js"></script>
    <link rel="stylesheet" href="{{ STATIC_URL }}ckeditor/samples1/css/samples.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}ckeditor/samples1/toolbarconfigurator/lib/codemirror/neo.css">
    <script src="{{ STATIC_URL }}web/Script/jquery-1.7.2.min.js"></script>
    <style>
        body{
            margin: 0 9px;
        }
        .emailtop {
            display: group;
            margin-bottom: 20PX;
            margin: 10px 0px;

        }
        .em_submit {
            text-align: center;
        }
        .emailtop input[type="submit"] {
            border: 1px solid #2480c2;
            box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
            background: linear-gradient(#54b3ff, #0078d9);
            padding: 5px 30px;
            color: #fff;
        }
        {#        .emailtop label {#}
        {#            margin: auto 45px;#}
        {#        }#}
        #cssel {
            width: 100%;
        }
        .emairight {
            display: none;
            position: fixed;
            right: 30%;
            top: -5px;
            width: 150px;
        }
        body *[class*="grid-width"]{
            padding:0px;
        }
         body input{
             padding: 3px 2px;
         }
    </style>
</head>
<body>
<div class="emailtop">
    <div><label>收件人：</label><input type="email" id="toemail" value="{{ email }}" required="required"></div>
    <div><label>抄&nbsp&nbsp&nbsp 送：</label><input id="csinput" type="email">
    </div>
    <div><label>主&nbsp&nbsp&nbsp 题：</label><input type="text" id="title" required="required"></div>
</div>
<div class="emairight">添加抄送
    <select name="chaosong" id="cssel" multiple required="false">
        {% for a in emails %}
            <option value={{ a.num__email }}>{{ a.name }}</option>
        {% endfor %}
    </select>
</div>
<div class="grid-container">
    <div class="grid-width-100">
        <div id="editor"></div>
    </div>
</div>
<div class="emailtop em_submit">
    <input type="submit" value="发送" id="submit">
</div>
<script>
    CKEDITOR.config.height = 150;
    initSample();
    $("#csinput").click(function () {
        $(".emairight").show();
    })
    $("#cssel").change(function () {
        $("#csinput").val($("#csinput").val() + $(this).children('option:selected').val() + ",")
    })
    $("#csinput").blur(function () {
        $(".emairight").hide()
    })
    $("#cssel").blur(function () {
        $(".emairight").hide()
    })
    $('#submit').click(function () {
        data = {'toemail': "", 'subemail': "", 'title': "", 'neirong': ""};
        data['toemail'] = $('#toemail').val();
        data['subemail'] = $('#csinput').val();
        data['title'] = $('#title').val();
        g = $('#cke_1_contents iframe');
        data['neirong'] = g["0"].contentDocument.documentElement.lastElementChild.innerHTML;
        $.ajax({
            type: 'POST',
            url: "{%  url 'sendemail' %} ",
            data: data,
            success: function (databack) {
                g["0"].contentDocument.documentElement.lastElementChild.innerHTML = "";
                alert("发送成功!");
            }
        })
    })
</script>
</body>
</html>